<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('晶棒查询')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
        .tag {
            display: inline-block;
            padding: 0 5px;
            line-height: 22px;
            color: #FFFFFF;
            border-radius: 3px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            任务编号：<input type="text" id="taskNumber" name="taskNumber"/>
                        </li>
                        <li>
                            单晶编码：<input type="text" id="materialId" name="materialId"/>
                        </li>
                        <li>
                            批次：<input type="text" id="batch" name="batch"/>
                        </li>
                        <li>
                            缓存线编码：<input type="text" id="shelfCode" name="shelfCode"/>
                        </li>
                        <li>
                            物料编码：<input type="text" id="materialProduct" name="materialProduct"/>
                        </li>
                        <li>
                            类型：
                            <select name="typeParam">
                                <option value="">全部</option>
                                <option value="1,1">缓存入库</option>
                                <option value="1,2">异常排出</option>
                                <option value="1,3">异常回流</option>
                                <option value="2,1">生产出库</option>
                                <option value="2,3">紧急出库</option>
                            </select>
                        </li>
                        <li>
                            状态：
                            <select name="state">
                                <option value="">全部</option>
                                <option value="0">已下发</option>
                                <option value="1">执行中</option>
                                <option value="2">报错</option>
                                <option value="3">已完成</option>
                                <option value="5">作废</option>
                                <option value="6">强制完成</option>
                                <option value="7">需盘点</option>
                                <option value="8">在途</option>
                            </select>
                        </li>
                        <li>
                            操作员：
                            <input type="hidden" id="createUserName" name="createUserName" v-model="checkCreateUserName"/>
                            <el-select multiple collapse-tags v-model="checkCreateUserList" @change="changeSelect" placeholder="请选择操作员">
                                <el-checkbox v-model="allCheckCreateUser" @change="selectAll" style="margin-left: 10px;padding: 5px 0">全选</el-checkbox>
                                <el-option v-for="(item, index) in users" :key="index" :label="item.userName" :value="item.userId"></el-option>
                            </el-select>
                        </li>
                        <li>
                            <label>任务开始时间：</label>
                            <el-date-picker
                                name="startTime"
                                v-model="timeA"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                name="endTime"
                                v-model="timeB"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="myReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="out:materialWork:export">
                <i class="fa fa-download"></i> 导出全部
            </a>
            <a class="btn btn-info" @click="partExcel()" shiro:hasPermission="out:materialWork:partExcel">
                <i class="fa fa-download"></i> 部分导出
            </a>
            <a class="btn btn-primary" onclick="$.table.print()">
                <i class="fa fa-print"></i> 打印
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>
    </div>
    <el-dialog title="设备信息" width="60%" :visible.sync="dialogTableVisible">
        <el-row>
            <el-col :span="24">
                <el-table border size="small" height="300" :data="item.list">
                    <el-table-column property="taskNumber" label="任务编号"></el-table-column>
                    <el-table-column property="barCode" label="托盘条码"></el-table-column>
                    <el-table-column property="deviceName" label="设备名称"></el-table-column>
                    <el-table-column property="createTime" label="时间"></el-table-column>
                </el-table>
                <el-pagination
                    @current-change="chengCurrentPage"
                    :current-page="item.currentPage"
                    :page-size="item.pageSize"
                    layout="prev, pager, next"
                    :total="item.total">
                </el-pagination>
            </el-col>
        </el-row>
    </el-dialog>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "task/selectIngot";

    var app = new Vue({
        el: '.container-div',
        data: {
            timeA: '',
            timeB: '',
            users: [],
            checkCreateUserList: [],
            allCheckCreateUser: false,
            checkCreateUserName: '',
            dialogTableVisible: false,
            item: {
                currentPage: 1,
                pageSize: 6,
                total: '',
                list: []
            },
            id: ''
        },
        methods: {
            //时间对比
            compareAB: function(){
                if(this.timeA != '' && this.timeA != null){
                    if(this.timeB != '' && this.timeB != null){
                        var a = new Date(this.timeA);
                        var b = new Date(this.timeB);
                        if(a >= b){
                            $.modal.alertError("结束时间需大于开始时间，请重新选择！！");
                            this.timeA = '';
                            this.timeB = '';
                        }
                    }else{
                        this.timeB = '';
                    }
                }else{
                    this.timeA = '';
                    if(this.timeB == null){
                        this.timeB = '';
                    }
                }
            },
            //获取操作员列表
            getUsers(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/user/list",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.users = data.rows;
                    }
                });
            },
            //操作员下拉框全选
            selectAll(){
                this.checkCreateUserList = []
                if(this.allCheckCreateUser){
                    var tmpArr = [];
                    this.users.forEach((item) => {
                        tmpArr.push(item.userName);
                    })
                    this.checkCreateUserList = tmpArr;
                    this.checkCreateUserName = this.checkCreateUserList.toString();
                }else{
                    this.checkCreateUserList = [];
                    this.checkCreateUserName = '';
                }
            },
            //切换操作员全选状态
            changeSelect(val){
                if(val.length == this.users.length) {
                    this.allCheckCreateUser = true;
                }else{
                    this.allCheckCreateUser = false;
                }
                this.checkCreateUserName = this.checkCreateUserList.toString();
            },
            //清空操作员
            resetCheckCreateUserName(){
                this.checkCreateUserList = [];
                this.checkCreateUserName = '';
            },
            //清空时间
            resetTime(){
                this.timeA = '';
                this.timeB = '';
            },
            //重置按钮
            myReset(){
                this.resetCheckCreateUserName();
                this.resetTime();
            },
            //部分导出
            partExcel(){
                var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectColumns("materialId") : $.table.selectColumns($.table._option.uniqueId);
                if(rows.length == 0){
                    $.modal.alertWarning("请至少选择一条记录");
                    return;
                }else{
                    $.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
                        var url = prefix + "/partExcel";
                        var data = {"ids": rows.join()};
                        $.post(url, data, function(result){
                            if(result.code == web_status.SUCCESS){
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                            }else if(result.code == web_status.WARNING){
                                $.modal.alertWarning(result.msg);
                            }else{
                                $.modal.alertError(result.msg);
                            }
                            $.modal.closeLoading();
                        });
                    });
                }
            },
            chengCurrentPage: function(currentPage){
                this.item.currentPage = currentPage;
                this.getMsg(this.id);
            },
            getMsg(id){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/taskFollow/findTaskHistoryDeviceName",
                    data: {
                        taskId: id,
                        pageSize: that.item.pageSize,
                        pageNum: that.item.currentPage
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var msg = data.rows;
                        for(var i = 0; i < msg.length; i++){
                            msg[i].createTime = that.timestampToTime(msg[i].createTime);
                        }
                        that.item.list = msg;
                        that.item.total = data.total;
                    }
                });
            }
        },
        created(){
            this.getUsers();
        }
    })

    $(function() {
        var options = {
            url: prefix + "/findList",
            exportUrl: prefix + "/export",
            modalName: "晶棒查询",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '序号',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'taskNumber',
                    title: '任务编号',
                    align: 'center'
                },
                {
                    field: 'materialId',
                    title: '单晶编码',
                    align: 'center'
                },
                {
                    field: 'batch',
                    title: '批次',
                    align: 'center',
                },
                {
                    field: 'currentDevice',
                    title: '设备信息',
                    align: 'center',
                    // formatter: function(value, row, index){
                    //     if(value != null){
                    //         var actions = [];
                    //         actions.push("<span onclick='seeMore(\"" + row.id + "\")' style='display: inline-block;cursor: pointer;padding: 0 5px;height: 22px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>"+value+"</span>");
                    //         return actions.join('');
                    //     }
                    // }
                },
                {
                    field: 'shelfCode',
                    title: '缓存线编码',
                    align: 'center',
                },
                {
                    field: 'materialProduct',
                    title: '物料编码',
                    align: 'center'
                },
                {
                    title: '物料名称',
                    align: 'center',
                    formatter: function(value, row, index){
                        return '单晶方棒';
                    }
                },
                {
                    field: 'typeName',
                    title: '类型',
                    align: 'center'
                },
                {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        if(value == 0){
                            actions.push("<span class='tag' style='background-color: #1ab394'>已下发</span>");
                        }else if(value == 1){
                            actions.push("<span class='tag' style='background-color: #1ab394'>执行中</span>");
                        }else if(value == 2){
                            actions.push("<span class='tag' style='background-color: #1ab394'>报错</span>");
                        }else if(value == 3){
                            actions.push("<span class='tag' style='background-color: #1ab394'>已完成</span>");
                        }else if(value == 4){
                            actions.push("<span class='tag' style='background-color: #1ab394'>取货货物不存在</span>");
                        }else if(value == 5){
                            actions.push("<span class='tag' style='background-color: #ed5565'>作废</span>");
                        }else if(value == 6){
                            actions.push("<span class='tag' style='background-color: #f8ac59'>强制完成</span>");
                        }else if(value == 7){
                            actions.push("<span class='tag' style='background-color: #f8ac59'>需盘点</span>");
                        }else if(value == 8){
                            actions.push("<span class='tag' style='background-color: #f8ac59'>在途</span>");
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'createUserName',
                    title: '操作员',
                    align: 'center'
                },
                {
                    field: 'taskStartTime',
                    title: '任务开始时间',
                    align: 'center',
                    formatter: function(value, item, index){
                        if(value == null){
                            return '';
                        }else{
                            return value.slice(0, 19);
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        if(row.state == 0){
                            actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="forceAbolish(\'' + row.id + '\')"><i class="fa fa-remove"></i>作废</a>');
                        }else if(row.state == 1 || row.state == 2){
                            actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="forceComplete(\'' + row.id + '\')"><i class="fa fa-edit"></i>强制完成</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function forceAbolish(id){
        layer.alert("确定进行此操作吗？", {
            title: "系统提示",
            btn: ['确定','取消'],
            yes: function(index, layero){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/in/billlIntaskInfo/billInTaskInvalid',
                    data: {
                        id: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        layer.close(index);
                        if(data.code == web_status.SUCCESS){
                            layer.alert(data.msg, {
                                title: "系统提示",
                                icon: 6,
                                end: function(){
                                    $.table.refresh();
                                }
                            });
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                })
            }
        });
    }

    function forceComplete(id){
        layer.alert("确定进行此操作吗？", {
            title: "系统提示",
            btn: ['确定','取消'],
            yes: function(index, layero){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/in/billlIntaskInfo/billInForceComplete',
                    data: {
                        id: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        layer.close(index);
                        if(data.code == web_status.SUCCESS){
                            layer.alert(data.msg, {
                                title: "系统提示",
                                icon: 6,
                                end: function(){
                                    $.table.refresh();
                                }
                            });
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                })
            }
        });
    }

    function seeMore(value){
        app.dialogTableVisible = true;
        app.id = value;
        app.getMsg(value);
    }
</script>
</body>
</html>
